<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>        
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
<title>Insert title here</title>
</head>
<body>

	<!-- 上侧栏 -->
	<div class="demoTable">
		订单号：
		<div class="layui-inline">
			<input class="layui-input" id="searchOrderNo"/>
		</div>
	  <button class="layui-btn" data-type="search">搜索</button>	
	  <button class="layui-btn" data-type="deleteAll">批量删除</button>
	  <button class="layui-btn" data-type="add">添加</button>
	</div>
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<!-- 右侧栏 -->
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="status">
		 {{#  if(d.status == 0){  }}
		 	           未回款
         {{#  } else  {              }}
				 已回款
		 {{#  }					     }}
	</script>
	
	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
	<script type="text/javascript">
	layui.use('table', function() {
		var table = layui.table;
		table.render({
		    elem: '#tableId'
		    ,url: '${ctx}/order/pageList.action' //数据接口,拿到数据
		    ,page: true //开启分页
		    ,id : "layUITableId" //设定容器唯一ID，id值是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引
		    ,cols: [[ //表头
		       {type:'checkbox', fixed: 'left'}//加选择框        
		      ,{field: 'id', title: 'ID', width:120, sort: true, fixed: 'left'}
		      ,{field: 'customerId', title: '客户ID', width:120}
		      ,{field: 'orderNo', title: '订单号', width:160, sort: true}
		      ,{field: 'saleChanceId', title: '营销机会ID', width:120, sort: true}
		      ,{field: 'productId', title: '产品表ID', width:120, sort: true}
		      ,{field: 'orderDate', title: '订购日期', width:160, sort: true}
		      ,{field: 'status', title: '状态', width:120,templet:"#status", sort: true}
		      ,{field: 'createTime', title: '创建时间', width: 180, sort: true}
		      ,{field: 'updateTime', title: '更新时间', width: 180, sort: true}
		      ,{fixed: 'right', width: 178, toolbar: '#barDemo' }
		    ]]
		  });
		
		   //监听工具条
		  //tool是工具条事件名，tableFilter是table容器属性lay-filter="tableFilter"对应的值
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;//获得当前行数据,json格式对象
		    var layEvent = obj.event;//获得lay-event对应的值
		    if(layEvent === 'detail'){
		      layer.msg('ID：'+ data.id + ' 的查看操作');
		    } else if(layEvent === 'del'){
		      layer.confirm('确定删除吗', function(index){
		    	$.ajax({
		    		url : "${ctx}/order/deleteById.action",
		    		data : {"id" : data.id},
		    		dataType : "json",
		    		success : function(resp){
		    			if(resp.code == util.SUCCESS){
		    				mylayer.success(resp.msg);
		    				table.reload("layUITableId");
		    			} else {
		    				mylayer.errorMsg(resp.msg);
		    			}
		    		}
		    	});
		      });
		    } else if(layEvent === 'edit'){
		    	 update(data)
		    }
		});
		   
		   var active = {
				//批量删除
				deleteAll : function(){//获取选中数据
					var checkStatus = table.checkStatus('layUITableId')
					var data = checkStatus.data;
					console.log(data);//选中行的数据
					console.log(checkStatus.data.length);//获取选中行的数量
					console.log(checkStatus.isAll);//表格是否全选
					var ids = util.getSelectedIds(data);//封装工具类封装了工具类转换成字符串"1,2,3"
					console.log(ids);
					layer.confirm('确定删除吗？',function(index){
						$.ajax({
							url : "${ctx}/order/deleteAll.action",
							data : {"ids" : ids},
							dataType : "json",
							success : function(resp){
								if(resp.code == util.SUCCESS){
									mylayer.success(resp.msg);
									table.reload("layUITableId");
								} else {
									mylayer.errorMsg(resp.msg);
								}
								layer.close(index);
							}
						});
					});
				},
				//搜索
				search : function(){
					table.reload('layUITableId',{
						where : {  //设定异步数据接口的额外参数，任意设
							orderNo : $("#searchOrderNo").val(),
						}
						,page : {
							curr : 1 //第一页开始
						}
					});
				},
			   //添加
			   add : function(){
				   insert()
		  		}
			   
		   }
		   
		   function insert(){
			   layer.open({
					type : 2,
					title : "添加订单",
					area : ["400px","500px"],
					offset : "40px", //定义top坐标，左右居中
					//弹出框里面的内容，转发(拿到Insert的页面)
					content : "${ctx}/order/getAddPage.action"
				})
		   }
		   
		   /* 修改 */
		   function update(data){
			   var id = data.id;
			   layer.open({
					type : 2,
					title : "修改订单",
					area : ["400px","500px"],
					offset : "40px", //定义top坐标，左右居中
					//弹出框里面的内容，转发(拿到Insert的页面)
					content : "${ctx}/order/getUpdatePage.action?id=" + id
				})
		   }
		   
		   
		  
		   $('.demoTable .layui-btn').on('click', function(){
			   var type = $(this).data('type');
			   active[type] ? active[type].call(this) : '';
		   });
	});	
	</script>
</body>
</html>